I am unable to use the "Delete" key to delete characters within this SSN Input field. If you enter nine numbers, then use the arrow keys to navigate to a portion of the string, and press the Delete button (not Backspace), the expected behavior does not happen. Is there a way to allow for the auto-formatting of the SSN (which is what the rest of the code does) while still allowing for the Delete button to behave as expected?
// SSN validation
// trap keypress - only allow numbers
$('input.ssn').on('keypress', function(event) {
// trap keypress
var character = String.fromCharCode(event.which);
if (!isInteger(character)) {
return false;
}
});
// checks that an input string is an integer, with an optional +/- sign character
function isInteger(s) {
if (s === '-') return true;
var isInteger_re = /^\s*(\+|-)?\d+\s*$/;
return String(s).search(isInteger_re) != -1
}
// format SSN
$('input.ssn').on('keyup', function() {
var val = this.value.replace(/\D/g, '');
var newVal = '';
if ((val.length > 3) && (val.length < 6)) {
newVal += val.substr(0, 3) + '-';
val = val.substr(3);
}
if (val.length > 5) {
newVal += val.substr(0, 3) + '-';
newVal += val.substr(3, 2) + '-';
val = val.substr(5);
}
newVal += val;
this.value = newVal;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="u22" class="ax_text_field">
<input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11" />
</div>